初心者でも簡単！仕事で使える色彩テクニック〜美しい色の組み合わせはたった４つだけ〜 #devio2023
こんにちは。CX事業本部Delivery部デザイナーチーム所属、デザイナーのスギヤマです。普段はモバイルアプリケーションやLINEアプリケーションの開発に携わっています。
私は、幼い頃から共感覚を持っており、色は日常的に馴染み深いものとしてありました。
7/7-8 東京日比谷にて開催されました「Developers IO 2023」では、初心者向けに色彩学の登壇をさせていただきました。今回はその内容をご紹介します。
なんとなくで色を選ばなくなる方法
今回は「色を選ぶ方法を知ることで、なんとなくで色を選ばなくなる」を目標にしています。
大きく３つのセクションにわけて構成しています。
Ⅰ.色相とトーンの話（第１〜５章）ここでは色の仕組みについて
Ⅱ.ゴールの話（第６章）ここではゴールの設定のしかたについて
Ⅲ.いろいろな見え方の話（第７章）ここでは色覚異常とそのサポートについて
それぞれ触れていきます。
第一章 まとまっている色、いない色
ここでは色彩調和している＝まとまっている色とそうでない色を確認していきます。
色は身近に溢れています。たとえば標識や看板、建築物やインテリア、服装やモノ、アプリやウェブや資料など、私達は普段からさまざまな色を目にしています。
この4枚の写真、どれも非常に色味がよくまとまっています。これを色彩調和している状態、と言います。
代表的な色を抽出していますが、鮮やかだったり、色褪せていたり、どれも雰囲気が違います。でもそれぞれどれもよくまとまっていて美しいです。
では逆に色彩調和していない状態とはどんなものでしょう。
ポケットモンスターのピカチュウのぬりえをお借りして、色彩調和していない状態を作ってみました。ルールがなく、適当に色を置いたような印象を受けます。
ではこのピカチュウのベースを抑えたまま、まとまった色合いにしてみます。
いかがでしょうか。左よりも右のほうが、よくまとまっていて落ち着いて見ることができるのではないでしょうか。
なぜまとまって見えるかと言うと、これは色の仕組みを考えながら配色をしているからです。では、その色の仕組みを、味方につけていきましょう。
第二章 色・電子レンジ・こたつは同じもの
ここでは色の性質について理解を深めていきます。
まず「色とはなんでしょう」。これはなかなか難しい問題かもしれません。正解は「電磁波」です。つまり、電子レンジで使われるマイクロ波や、こたつで使われる赤外線と同じ仲間です。
紫の外の電磁波だから紫外線、赤の外の電磁波だから赤外線、というわけです。波長が短くなれば青く、長くなれば赤くなります。
電磁波のうち、人間の目に見える部分を「可視光線」といいます（生き物によっては、見える電磁波の長さが異なることもあります）。
太陽から差し込む光は真っ白です。この色味を感じられない光のことを「白色光」といいます。 万有引力を発見したことで有名なニュートンは、白色光をプリズムに通し、様々な色に分ける実験を行いました。
プリズムとは、ガラスなどからできた透明な三角柱で光を屈折させたり分散させたりするものです。すでに一世紀頃には使われていました。
彼は、「太陽の白い色の光は、すべての色の光が混ざったもの」であること、そして「色によって屈折する角度がちがう」ことを、確かめました。
このように、光そのものの色のことを光源色といいます。光源色は混ぜるとどんどん明るく、白くなっていきます。これを「加法混色」といいます。
たとえば普段使っている スマートフォンやディスプレイは光源色です。時々雨に濡れたスマートフォンを見ると赤と青と緑のLEDの点々がみえませんか。赤と青と緑の光を点灯させて白を表現しています。
またライブのステージで使用される色付きの照明もこの光源色に該当します。
ではディスプレイのように光っているわけではない色はどうでしょう。りんごの赤、葉の緑、花の青は、物体に吸収されず、跳ね返った残りの光＝電磁波を私達は色と認識しているのです。
このように、光がものに反射して見える色を物体色といいます。物体色は混ぜるとどんどん暗く、黒くなっていきます。これを減法混色といいます。
小学校の頃など、授業で水彩画を描いていて、筆を洗った水がどんどん黒く濁っていった経験があると思います。あれがまさに減法混色です。物体色は混ぜれば混ぜるほど、黒に近づいていってしまうのです。
色の正体についてまとめた図
「光が直接目に入ったり、光が物にあたって、吸収されずにのこった電磁波」を、私達は目の中の細胞が認識し脳が認知し、色を感じ取っています。また白色光はいろいろな色が集まって白くなっています。したがってプリズムに通すと屈折して色々な色がみえます。これが色の正体です。
人間は、１００万から１０００万色の色を見分けられると言われています。しかしこんなに色があっても、使う方法や手段を知らなければ、とても選べません。
- 資料を作る時にすごく目立たせたいけど、なんだかおかしくなってしまう。
- 新しいサービスのかっこいいウェブサイトを作りたいけど、どんな色を選べばいいかわからない
そこで、この沢山の色の中から、自分にとって適切なものを選り分けていきましょう。
第三章 色を選り分けてみよう
まず、ざっくりと色には大きく分けて2つあります。有彩色と無彩色です。赤や青など色味を感じることができるのは有彩色、色味を感じられない白、黒、灰色は無彩色です。
無彩色、有彩色にどんな色があるのか。日本では基本となる色が決められています。（勿論これ以外もたくさん色はあるのですが）基本色、とされているのはたった１３色です。
オレンジ色は黄赤とあります。でも私達は日常的に「オレンジ」と言います。これはもちろん英語から来ています。
アメリカの基本色です。オレンジ、は外来語なので、先程の図ではオレンジ、という名前はついていなかったんですね。特徴的なのはピンク、ブラウン、オリーブ、が加わっているところです。 こちらも全部で１３色です。
思ったよりも少ないと思いませんか。
代表的な色味を円形に並べた図です。有彩色のこの色味の変化を「色相」といい、そしてこのように丸く配置したものを「色相環」といいます。 これはPCCS日本色研配色体系（1964年（昭和39年）設立の色彩教材の専門メーカー。 製品は日本色彩研究所の監修・指導のもと、日本流行色協会や日本色彩教育研究会の協力を受けて製作されている）の色相環を参考に作成しています。
では、この色相環の中から赤の色を探してみてください。
簡単に見つかりますね。見慣れた赤です。
しかし私達が日常生活で見ている赤は、これだけじゃありません。
りんごの明るい赤、ワインの暗い赤、レンガの色褪せた赤、他にもさまざまな赤があります。ではそんな色々な赤を、ある一定の法則によってプロットしてみます。
いろいろな赤がありますね。
赤の色味、つまり赤の色相のうち、明度（明るさ）や彩度（鮮やかさ）に差をつけたものを等間隔にプロットした図です（この図は1905年アメリカの美術教育者で画家でもあったアルバート・マンセルの作った「マンセルシステム」を参考に制作しています）。先程見ていた鮮やかな赤は一番右端に配置されています。
明度というのはわかりやすいです。白に近いほうが明度が高い。だからピンクっぽい色になっています。黒に近いほうが明度が低い。だから茶色っぽくなっています。この図だと上が明るく、下が暗いです。
彩度は少し明度と混同しやすいです。右に行くほど鮮やか。だから赤らしい赤になっています。左に行くほど色褪せている。だから灰色のような赤になっています。明度が高くても、彩度が低い色が存在します。
わかりやすいように極端な性質を持つ赤を４つ抽出しました。
- 左上：高明度・低彩度の赤 ＝ 桜の花びらのように明るく色褪せた赤
- 右上：高明度・高彩度の赤 ＝ 信号機のように明るい鮮やかな赤
- 左下：低明度・低彩度の赤 ＝ 醤油のように暗く色褪せた赤
- 右下：低明度・高彩度の赤 ＝ ワインのように暗く鮮やかな赤
このように同じ赤の色相でも、明度や彩度によってさまざまな赤が存在します。
第四章 色相・彩度・明度のまとまり「トーン（雰囲気）」
色の選り分けについて、色相（色の種類）、明度（明るさ）、彩度（鮮やかさ）の指標があることがわかりました。これをさらに使いやすく、まとまりごとに分けた考え方が存在します。それをトーンといいます。
赤の明度と彩度の変化を表にしたもの
明度と彩度をまとりごとに分けたトーンマップ
先程の「明度」「彩度」をプロットした図に、よく似た図です。これは「トーンマップ」と言います。学校では習わないので、デザイナー以外にはあまり馴染みがないものです。しかし、これを知っておくと色の見え方がぐっとかわってきます。
上へ行くほど明るいトーン。下へ行くほど暗いトーン。右へ行くほど高彩度のトーン。左へ行くほど低彩度のトーン。そして無彩色（白と黒と灰色）は左側にまとめられています。
トーンにはそれぞれ名前がついています。
- ビビット
- ブライト・ライト・ペール
- ディープ・ダーク・ダークグレイッシュ
- ストロング・ソフト・ダル・ライトグレイッシュ・グレイッシュ
- 一番右が鮮やかな純色
- 上の方が明るい明清色
- 下の方が暗い暗清色
- 中央にある残りが濁色（中間色とも言う）
くらいのざっくりとした見方もあります。
たとえば先程の４種類の赤をこのトーン表に即してみると、トーンマップでは概ねこの場所に位置しています。
つまり
- 左上：高明度・低彩度の赤 ＝ 桜の花びらのように明るく色褪せた赤
- 右上：高明度・高彩度の赤 ＝ 信号機のように明るい鮮やかな赤
- 左下：低明度・低彩度の赤 ＝ 醤油のように暗く色褪せた赤
- 右下：低明度・高彩度の赤 ＝ ワインのように暗く鮮やかな赤
をトーン表に即した言い方にすると
- 左上：ペールトーンの赤 ＝ 桜の花びらのように明るく色褪せた赤
- 右上：ブライトトーンの赤 ＝ 信号機のように明るい鮮やかな赤
- 左下：ダークグレイッシュトーンの赤 ＝ 醤油のように暗く色褪せた赤
- 右下：ディープトーンの赤 ＝ ワインのように暗く鮮やかな赤
と言い換えることができます。
青になったら「ペールトーンの青、ブライトトーンの青」と言えますし、緑になったら「ペールトーンの緑、ブライトトーンの緑」と言えます。
さまざまなトーンの例
トーンには形容詞が定義されています。実際のウェブサイトを見て、定義された形容詞の雰囲気が感じ取れるかどうか、見ていきます。
ビビットトーンの例
ビビットトーンは、純色とよばれる黒が混ざらない冴えた色味です。トーンは雰囲気を表現していますので、形容詞が定義されています。冴えた、鮮やかな、派手な、目立つ、生き生きした、という雰囲気であるとされています。
元気で明るいイメージにぴったりですね。また非常に鮮やかなので、強調してみせたいときに便利です。逆に使いすぎるとうるさくなってしまったり、子供っぽくなってしまうことがあるため、注意が必要です。
出典：BAYCREW'S STORE CHRISTMAS COUNT DOWN、株式会社With Midwife、SPARK HUMANITY、Large Diversity Songs
ライトグレイッシュトーンの例
ライトグレイッシュトーンはペールトーンに灰色を混ぜたような色合いです。落ち着いた雰囲気をもっていて、特に環境デザインやインテリアデザインの領域で使われる機会が多いトーンです。
出典：幸南食糧株式会社、KURYU GATE、Hair salon Acot、株式会社永井興産
ペールトーンの例
ペールは薄い、という意味です。アクセサリーや化粧品を始め、アレルギーに関するウェブサイトや女子大学などで使用されています。かろやかで優しく、寄り添うようなイメージが有ります。ただとても淡い色合いであるため、視認性は高くありません。
出典：
出典：ALLERU アレル ツラいのはひとりじゃない、化粧筆専門店 京都六角館さくら堂、九州のドローン空撮サービス | 九州空撮隊、神戸女学院大学 文学部英文学科
ダークグレイッシュトーン
ペールトーンが女性的ならば、ダークグレイッシュトーンは男性的だと言われています。ジャズバーや織物、工房のウェブサイト、カフェなどのウェブサイトを例としてお借りしました。高級感・重厚感を感じさせます。
出典：Ambient Weaving ― 環境と織物、株式会社 吉松工機、藍森山 | 安政五年創業の久留米絣の工房、 allée -アレ- | スイーツ・カフェ 表参道
さきほどのペールトーンの大学のサイトとこちらのカフェサイトは雰囲気が対照的です。しかし良くみれば、同じような黄色みのオレンジが使われています。
おなじ色相でもトーンが違うので、まったく違う雰囲気がします。この二色の色相は同じです。ただトーンが違います。
第5章 色相＋トーンでもう迷わない
ここでは、「色相」と「トーン」を使いこなす方法を紹介します。
しっくりくる４つの組み合わせ
しっくりくる色を、最低限の要素で構成してみると、色相とトーンの適切な組み合わせは４つと言えます。
しっくりくる色
↓
色相の定番組み合わせ２つ × トーンの定番の組み合わせ２つ ＝ ４パターンの組み合わせ
これだけです。
しっくりくる色相の組み合わせ
まずは代表的な色相の組み合わせを４つ紹介します。でもざっくりいうと、２つだけです。「似ていて近い色」か、「反対で遠い色」を選ぶ。たったこれだけです。
近い色
色相を選ぶ時に、隣り合う色を選ぶと調和します。これは色相環において、五度の角度の色を選んでいるので正確には隣接色相と呼びます。
色相を選ぶ時に、似たような色相を選ぶと調和します。これは色相環において、30度~45度の角度の色を選んでいるので正確には類似色相と呼びます。
遠い色
色相の真反対の色を補色といいます。全く反対の色でこれは調和します。
さきほどのこれは補色、に近い色が使用されています。ある程度バッファがあるこの形は対照色相、と呼びます。
つまり大きく分けて２種類の色相の組み合わせとなります。
それから、白と黒はどんな色と合わせてもよく合います。チートカラーです。何事にも例外はあります。
色相の選び方はこれだけです。似ているか、反対か。２つしか無いので簡単だと思いませんか？
やや余談ですが、実はこれ意外にも、さまざまな色相の選び方があります。どれもきれいな幾何学模様になっているのがわかりますね。
トライアドは色相環ですべて同じ角度の３つの色を選びます。テトラードは４つ、ペンタードは５つ、ヘクサードは６つです。たくさん色を使っていても、一定の角度を守っているときれいに見えます。
また、ペンタードやヘクサードは白と黒に３色、４色を加えるパターンも存在します。
しかし、沢山の色を使うのはなかなか骨が折れます。強いコンセプトがある場合を除き、色を増やしたいときには、「似ている色」「反対の色」の範囲で、少しずつ増やしていくのがおすすめです（このように複数の類似色相で構成することをドミナントカラー配色とも言います）。
こちらのサイトでは１色選ぶと自動でドミナントカラーを生成してくれます。
トーンの組み合わせ
色はさまざまな種類がありました。そして色は色相だけではありませんでした。明度や彩度も考慮できるトーンも一緒に組み合わせましょう。
近いトーン
色相では「色相環で隣り合った色はしっくりくる」としました。同じように「隣り合ったトーンはしっくりくる」という法則があります。色相でやったこととまったく同じで、すごく近いか、すごく遠いと調和します。
もちろん縦方向でもOKです。
遠いトーン
これは彩度が同じで、明度が対照的なトーンになっています。
同じように彩度の対照トーンもOKです。
トーンの選び方はこれだけです。２つしか無いので簡単だと思いませんか？
色相×トーン
つまり色相の２種類、トーンの２種類をかけあわせた４種類を選べば、しっくりくる色が作れるということです。
どれもまとまった色味に見えませんか？
左は似たような色で似たようなトーン。右は似たような色だけど、ぜんぜん違うトーン
左は色はぜんぜん違うけど、トーンは同じ。右は色もぜんぜんちがうし、トーンもぜんぜん違う
第6章 ゴールを意識した色選び
色の選り分けをする方法は簡単でした。ではそれを実際の現場でつかっていきます。色を選ぶ時に目的を考えてみることが必要です。
標識のゴール
標識では色によって何を達成しようとしているでしょうか。おそらく、標識に記した情報が、読みやすく気づきやすいことが必須です。看板などでもそうですね。
非常にさし迫ったゴール＝目的を持つものが交通標識です。危険を知らせるものですから、たとえ車を運転して移動している状態でも目に入ってくるようにしなければなりません。そのためとても鮮やかな色が使用されています。また、白や黒といった無彩色を組み合わせています（これをビコロール配色といいいます）明度差を出して目立たせています。
たとえば、作成した資料などで必ず認知してほしい部分などには、このような強調色が使用されることがあります。アプリケーションなどでも、データの削除など、戻ることができない選択肢などでは、このような色合いがいいでしょう。ただ標識の「止まれ」サインのように相手に圧力・ストレスをかける色合いでもありますので、多用するのは注意が必要です。
注目してほしい情報に赤を配置した例
アプリ・ウェブサービスなどでのゴール
アプリケーションやウェブサービスでは、色を利用してより使いやすくできたり、サービスブランドのイメージをより正確につたえることができるでしょう。
一般的に、モバイルアプリケーションは非常に厳密なカラーリングを使用しています。お客様にブランドのイメージががきちんと伝わるよう、コントロールが必要です。
出典：App Storeプレビュー スターバックス ジャパン公式モバイルアプリ
また、アプリケーションやウェブサービスは機器や端末に左右されることもあるので、ガイドラインに留意し、使いやすさも担保しなければなりません。予め決められたルールをしっかりと守ることで、ユーザーの達成したい目的のサポートを適切に行うことができます。
出典：Color - Material UI、Apple Developer Documentation
実際の現場で使用されたゴールの例
AWSイベントのプロジェクトでは、色味は「類似色相」そしてトーンは「ブライトトーン」の同一トーンでまとめました。ブライトトーンは「明るいにぎやかな」イメージを持っているのでゴールにぴったりだと思い選定しました。
ここではAWSのブランドカラーのオレンジをさらに鮮やかにしたものと、白と黒の無彩色で構成しました。これは先程すこし触れました、チートカラーを使用した、単一の色相で構成した画面です。このようにゴールを設定して配色ができれば、より目的に沿った効果が得られます。
第7章 色覚異常とユニバーサルデザインについて
商品、サービス、資料などは多くの人の目に触れます。自分一人だけで使用するものではありません。色を使っていくにあたり、様々な見え方がある、ということも考えていきたいです。
アクセシビリティの例では、大きなボタンの携帯電話や文字の拡大機能があります。ユニバーサルデザインの考え方を踏まえた製品やサービスは、アクセシビリティも高くなるといえます。ここでは特に配色にフォーカスし、代表的な色覚異常の例と、そのサポートをするための工夫を紹介します。
先天的な色覚異常の代表例
色覚異常には大きく分けて２つあります。先天的なものと、後天的なものです。先天性の場合、日本の男性の20人に1人（5%）や女性の500人に1人（0.2%）が色覚異常を持っているといわれています。
目の構造を簡単な図にしました。中央の赤、緑、青の視細胞が、眼球の網膜に存在しています（灰色の視細胞は明るさ・暗さを感じます）。ここで光を受け取ります。そしてそれが神経節細胞に運ばれ、反応し、脳の外側膝状体（がいそくしつじょうたい）という所に伝わり、色だと認識します。注目してほしいのは一番右です。赤と緑に反応する細胞と、黄色と青に反応する細胞があります。
色相環を二つ並べています。左が、赤と緑が見えにくい状態で黄色と青はよく見えます。右が黄色と青が見えにくい状態で赤と緑はよく見えます。こちらはかなりざっくりとした図ですが、どうしてこのように見えるのか、イメージが掴めるかと思います。
後天的な色覚異常の代表例
目の疾患によっても色の見え方は変化します。代表的な後天的色覚障害として白内障があります。白内障は目の水晶体が白く濁る疾患です。症状が進むと、対象がぼやけたり二重がかって見えるほか、青の色味が見えにくくなります。
白内障発症率は、50代では40%ですが、80代では100％です。とても身近な色覚障害だと思いませんか。
どんな人にも伝わる工夫
色覚異常はとても身近です。したがって、どんな人にも伝わる配色にしたいですよね。
たとえば「では、こちらのグラフをご覧下さい」といわれたときに、左上のような「緑と黄色のグラフ」では、遠くから見ている色弱の方は、二本のグラフの色が区別が付きません。そのため、色相や明度にしっかりと差を付ける必要があります。
また、暗い色合いや細い文字は、白内障などの方にも見えにくいです。大切な情報は、明度差をつけてはっきりとした色にしましょう。
ブランドカラーを厳守しなくてはいけないシチュエーションなど「どうしてもこの色しか使えない」というケースもあると思います。赤と緑をどうしても使わなくてはいけない、しかし色弱の方にはどちらも同じような色合いに見えてしまう。そのような場合は、白などのはっきりとした色で境目を付けたり、模様をつけるなどをして、違いがはっきりと分かるようにします。
これは削除ボタンと購入ボタンというまったく違う性質のボタンです。しかし左上の配色ですと、色弱の方には同じような色味に見えてしまい、押し間違えてしまいそうです。この場合は、先頭にアイコンをつけたり、ボタンのデザインそのものの形をかえたりすることで、しっかりと差をつけることができます。
まとめ
「なんとなくで色を選ばなくなる」ための方法論のまとめです。
Ⅰ.色相とトーンの話（第１〜５章）
色は色相とトーンを考えましょう。４つしか組み合わせがないので簡単です。
Ⅱ.ゴールの話（第６章）
達成したい目的を考えると、より良い効果が得られます。
Ⅲ.いろいろな見え方の話（第７章）
様々な人が見ることを考え、工夫をします。
どれもすぐに使うことが出来る簡単な配色の工夫なので、ぜひ役立てて頂けたら嬉しいです。
